<template>
	<view style="background-color: #fefefe;padding-bottom: 30px;" class="swiper box">
		<swiper style="height: 160px;display: flex; justify-content: center;" :autoplay="true" circular="true"
			:interval="3000">
			<swiper-item v-for="(item, index) in tagsList" :key='index'>
				<view class="grid">
					<view class="grid-item" v-for="(it, ind) in item" :key="ind" @click="tran1(JSON.stringify(it))">
						<image :src="it.url" mode="aspectFill" class="grid-image" />
						<text class="grid-text">{{ it.name }}</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>

	<div style="background-color: aquamarine;" class="tag-card">

	</div>
</template>

<script>
import { getTags } from '@/store/api.js'
export default {
	mounted() {
		uni.$on('flushed', (val) => {
			console.log('收到')
			this.tagsList = []
			getTags().then(res => {
				console.log(res.data.data.length)
				let temp = []
				res.data.data.forEach((item, index) => {
					console.log(index == res.data.data.length - 1)
					if ((index + 1) % 6 == 0 || index == res.data.data.length - 1) {
						temp.push(item)
						this.tagsList.push(temp)
						temp = []
					} else {
						temp.push(item)
					}
				})
				console.log(this.tagsList)
			}).catch(err => {
				console.log(err)
			})
		})
		getTags().then(res => {
			console.log(res.data.data.length)
			let temp = []
			res.data.data.forEach((item, index) => {
				console.log(index == res.data.data.length - 1)
				if ((index + 1) % 6 == 0 || index == res.data.data.length - 1) {
					temp.push(item)
					this.tagsList.push(temp)
					temp = []
				} else {
					temp.push(item)
				}
			})
			console.log(this.tagsList)
		}).catch(err => {
			console.log(err)
		})
	},
	data() {
		return {
			tagsList: [],
			src1: ["http://8.146.208.139:3000/img_test/basketball.png", "http://8.146.208.139:3000/img_test/football.png", "http://8.146.208.139:3000/img_test/valleyball.png",
				"http://8.146.208.139:3000/img_test/badmintain.png", "http://8.146.208.139:3000/img_test/swim.png", "http://8.146.208.139:3000/img_test/dumbbek.png"
			],
			src2: ["http://8.146.208.139:3000/img_test/car.png", "http://8.146.208.139:3000/img_test/sing.png", "http://8.146.208.139:3000/img_test/shop.png", "http://8.146.208.139:3000/img_test/trip.png", "http://8.146.208.139:3000/img_test/study.png",
				"http://8.146.208.139:3000/img_test/other.png",
			],
			page1: [
				{
					id: 1,
					name: '篮球'
				},
				{
					id: 2,
					name: '足球'
				},
				{
					id: 3,
					name: '排球'
				},
				{
					id: 4,
					name: '羽毛球'
				},
				{
					id: 5,
					name: '游泳'
				},
				{
					id: 6,
					name: '健身'
				}],
			page2: [
				{
					id: 7,
					name: '拼车'
				},
				{
					id: 8,
					name: '演唱会'
				},
				{
					id: 9,
					name: '拼单'
				},
				{
					id: 10,
					name: '旅行'
				},
				{
					id: 11,
					name: '学习'
				},
				{
					id: 12,
					name: '其他'
				}],
		}
	},
	methods: {
		tran1(item) {
			uni.navigateTo({
				url: `/subpkg/home_detail/home_detail?param=${item}`
			})
		},
		tran2(item) {
			uni.navigateTo({
				url: `/subpkg/home_detail/home_detail?param=${item}`
			})
		},
	},
};
</script>

<style scoped>
/* 样式可根据需要进行修改 */
/* 样式可根据需要进行修改 */
.swiper {
	/* height: 300rpx; */
	/* 设置swiper高度 */
	margin-bottom: 1vh;
}

.box {
	box-shadow: 7px 7px 14px #d0d0d0,
		-7px -7px 14px #f0f0f0;
}

.grid {
	background-color: #fff;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 20rpx;
	/* 方块之间的间距 */
	padding: 15rpx;
}

.grid-item {
	display: flex;
	height: 140rpx;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* background-color: #eee; */
	background-color: #fefefe;
	/* 方块背景色 */
	border-radius: 10rpx;
	/* 圆角 */
	cursor: pointer;
}

.grid-image {
	width: 60rpx;
	/* 图片宽度 */
	height: 60rpx;
	/* 图片高度 */
	border-radius: 50%;
	/* 图片圆角 */
}

.grid-text {
	margin-top: 5rpx;
	/* 文字和图片间距 */
	font-size: 25rpx;
	/* 文字大小 */
}
</style>